<template>
    <div class="box">
        <van-nav-bar :title="proname" left-text="返回" left-arrow @click-left="$router.go(-1)"
            @click-right="onClickRight">
            <template #right>
                <!-- 弹出框 -->
                <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect"
                    placement="bottom-end" theme="dark">
                    <template #reference>
                        <van-icon name="more-o" size="22" />
                    </template>
                </van-popover>
            </template>
        </van-nav-bar>
        <!-- $route 路由的配置对象  $router 路由跳转对象 -->
        <!-- <van-cell title="显示分享面板" @click="showShare = true" /> -->
        <van-share-sheet @click="showShare = true" v-model="showShare" title="立即分享给好友" :options="options"
            @select="onSelect" />
        <van-pull-refresh style="min-height: 100vh" v-model="isLoading" @refresh="onRefresh">
            <div class="content">
                <div class="my-detail-swipe">
                    <van-swipe @change="changeSwiper" class="my-swipe" indicator-color="white"
                        :initial-swipe="index - 1">
                        <van-swipe-item v-for="(item, index) in banners" :key="index" @click="previewImage">
                            <van-image :src="item" />
                            <!-- 页面 -->
                            <div class="my-type">{{ index + 1 }}/{{ banners.length }}</div>
                        </van-swipe-item>
                    </van-swipe>
                    <!-- 视频播放 -->
                    <div class="video-btn" @click="show = true">
                        <van-icon size="20" color="#f66" name="play-circle-o" />
                        {{ time | timeFilter }}
                    </div>
                </div>
                <div style="height: '3000px'">
                    <h3 class="h">{{ proname }}</h3>
                    <span class="sp">{{ category }}</span>
                    <span class="s">￥</span><s class="s"> {{ originprice }}</s>

                </div>
                <van-goods-action>
                    <van-goods-action-icon icon="chat-o" text="客服" @click="chart" color="#ee0a24" />
                    <van-goods-action-icon @click="toCart" icon="cart-o" text="购物车" />
                    <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
                    <van-goods-action-button @click="addCartFn" type="warning" text="加入购物车" />
                    <van-goods-action-button type="danger" text="立即购买" />
                </van-goods-action>
            </div>
        </van-pull-refresh>
        <!-- 弹出层 遮罩层 -->
        <van-overlay :show="show" @click="show = false">
            <video class="my-video" ref="vdo" controls :src="vdoSrc"></video>
        </van-overlay>
    </div>
</template>
<script>
import Vue from "vue";
import { getProDetailData } from "@/api/detail";
import { getCartAdd } from "@/api/cart";

import {
    NavBar,
    Popover,
    ShareSheet,
    Swipe,
    SwipeItem,
    Image as VanImage,
    PullRefresh,
    Toast,
    ImagePreview,
    Overlay,
    GoodsAction,
    GoodsActionIcon,
    GoodsActionButton,
} from "vant";

Vue.use(Popover);
Vue.use(NavBar);
Vue.use(ShareSheet);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(VanImage);
Vue.use(PullRefresh);
Vue.use(ImagePreview);
Vue.use(Overlay);
Vue.use(GoodsAction);
Vue.use(GoodsActionIcon);
Vue.use(GoodsActionButton);

export default {
    data() {
        return {
            vdoSrc:
                "https://jvod.300hu.com/vod/product/a4ef6fd8-9ec7-438b-b103-abcfe82a050d/e0a68f3f862a42a99ef253d38830e8b9.mp4",
            show: false,
            showPopover: false,
            // 通过 actions 属性来定义菜单选项
            actions: [
                { index: 0, text: "首页", icon: "wap-home-o" },
                { index: 1, text: "分类", icon: "bars" },
                { index: 2, text: "购物车", icon: "shopping-cart-o" },
                { index: 3, text: "个人中心", icon: "friends-o" },
                { index: 4, text: "分享", icon: "share-o" },
            ],
            showShare: false,
            options: [
                { name: "微信", icon: "wechat" },
                { name: "微博", icon: "weibo" },
                { name: "复制链接", icon: "link" },
                { name: "分享海报", icon: "poster" },
                { name: "二维码", icon: "qrcode" },
            ],
            banners: [], // 轮播图的数据
            proname: "", // 产品名称
            originprice: 0, // 产品的原价
            category: "", // 产品的分类
            discount: 0, // 折扣
            index: 1, // 记录轮播图当前显示的是第几张图片
            time: 0, // 视频的时长
            count: 1,
            isLoading: false,
            proid: ''
        };
    },
    mounted() {
        // console.log(this.$route);
        this.proid = this.$route.params.proid;
        getProDetailData(this.proid).then((res) => {
            console.log(res.data);
            const data = res.data;
            this.banners = data.banners[0].split(",");
            //   console.log(this.banners);
            this.proname = data.proname;
            // this.proid = data.proid;
            this.originprice = data.originprice;
            this.category = data.category;
            this.discount = data.discount;
            this.time = this.$refs.vdo.duration;

            // 详情页面视频
            //   setTimeout(() => {
            //     // console.log(this.$refs.vdo.duration);
            //     // 加上请求的详情页面中有视频 40.15 == 00‘40
            //     this.time = this.$refs.vdo.duration;
            //   }, 1000);

        });
    },
    // 过滤器
    filters: {
        timeFilter(val) {
            let t = Math.floor(val / 60);
            let s = Math.floor(val % 60);
            t = t < 10 ? "0" + t : t;
            s = s < 10 ? "0" + s : s;
            return t + "'" + s;
        },
    },
    methods: {
        toCart() {
            this.$router.push('/cart')
        },
        //  加入购物车
        addCartFn() {
            // 获取登录状态
            if (this.$store.state.user.loginState) {
                const userid = localStorage.getItem('userid')
                getCartAdd({
                    userid,
                    proid: this.proid,
                    num: 1
                }).then(res => {
                    // console.log(proid);
                    // console.log(res);
                    if (res.data.code !== '100119') {
                        Toast('加入购物车成功')
                    }
                })
            } else {
                // 未登录状态
                this.$router.push('/login')
            }

        },
        //   客服
        chart() {
            //   console.log("123456789");
            // 显示聊天界面的方法
            _MEIQIA("showPanel");
        },
        onClickLeft() {
            //   console.log("left");
        },
        onClickRight() {
            //   console.log("right");
        },
        previewImage() {
            ImagePreview({
                images: this.banners,
                startPosition: this.index - 1,
                // 设置需要预览的图片大图
                onChange: (index) => {
                    this.index = index + 1;
                },
            });
        },
        // 下拉刷新
        onRefresh() {
            setTimeout(() => {
                Toast("刷新成功");
                this.isLoading = false;
                this.count++;
            }, 1000);
        },
        changeSwiper(index) {
            // 监听轮播图被滚动了
            //   console.log(index);
            // 记录当前是在第几张图片上
            this.index = index + 1;
        },
        onSelect(option) {
            Toast(option.name);
            this.showShare = false;
        },
        onSelect({ index }) {
            switch (index) {
                case 0:
                    this.$router.push("/home");
                    break;
                case 1:
                    this.$router.push("/kind");
                    break;
                case 2:
                    this.$router.push("/cart");
                    break;
                case 3:
                    this.$router.push("/user");
                    break;
                case 4:
                    // 分享
                    this.showShare = true;
                    break;
            }
        },
    },
    // 监听器
    watch: {
        show(newVal) {
            if (newVal) {
                // 从头开始播放
                this.$refs.vdo.currentTime = 0; // 设置播放时长
                // 播放
                this.$refs.vdo.play();
            } else {
                // 暂停
                this.$refs.vdo.pause();
            }
        },
    },
};
</script>
<style scoped>
.van-swipe {
    background: rgb(255, 255, 255);
    height: 3.7rem;
}

.van-swipe-item {
    position: relative;
    width: 100%;
}

.van-swipe-item .van-image {
    width: 100%;
}

.van-swipe-item .van-image img {
    width: 100%;
}

.my-type {
    position: absolute;
    right: 0px;
    bottom: 20px;
    width: 50px;
    height: 20px;
    text-align: center;
    background-color: #ccc;
    border-radius: 10px 0 0 10px;
    line-height: 20px;
}

.my-detail-swipe {
    position: relative;
}

.video-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 80px;
    height: 30px;
    transform: translateX(-50%);
    background-color: #ffff;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.my-video {
    position: fixed;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.h {
    color: #f66;
    padding: 10px;
    line-height: 26px;
    font-size: 18px;
}

.sp {
    font-size: 18px;
    padding: 10px;
}

.s {
    font-size: 22px;
    color: red;
}

</style>
